/**
 * 航空订票系统前端交互脚本
 * 增强版本 - 添加现代化交互效果和动画
 */

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    // 初始化工具提示
    initTooltips();
    
    // 初始化动画效果
    initAnimations();
    
    // 初始化表单验证
    initFormValidation();
    
    // 初始化响应式调整
    initResponsiveAdjustments();
    
    // 初始化页面平滑滚动
    initSmoothScrolling();
    
    // 初始化延迟加载元素
    initLazyLoad();
    
    // 初始化数字动画
    initCounterAnimation();
    
    // 初始化卡片悬停效果
    initCardHoverEffects();
    
    // 初始化飞行路线动画（针对航班搜索结果）
    initFlightRouteAnimations();
});

/**
 * 初始化工具提示
 */
function initTooltips() {
    // 检查jQuery和Bootstrap是否加载
    if (typeof $ !== 'undefined' && typeof $.fn.tooltip !== 'undefined') {
        $('[data-toggle="tooltip"]').tooltip({
            animation: true,
            delay: {show: 100, hide: 100},
            trigger: 'hover'
        });
        
        $('[data-toggle="popover"]').popover({
            trigger: 'focus',
            html: true
        });
    }
}

/**
 * 初始化动画效果
 */
function initAnimations() {
    // 导航栏项目悬停效果
    const navItems = document.querySelectorAll('.navbar-nav .nav-item');
    navItems.forEach(item => {
        item.addEventListener('mouseenter', function() {
            if (!this.classList.contains('active')) {
                this.querySelector('.nav-link').style.transform = 'translateY(-2px)';
                this.querySelector('.nav-link').style.backgroundColor = 'rgba(255, 255, 255, 0.1)';
            }
        });
        
        item.addEventListener('mouseleave', function() {
            if (!this.classList.contains('active')) {
                this.querySelector('.nav-link').style.transform = 'translateY(0)';
                this.querySelector('.nav-link').style.backgroundColor = 'transparent';
            }
        });
    });
    
    // 按钮点击波纹效果
    const buttons = document.querySelectorAll('.btn');
    buttons.forEach(button => {
        button.addEventListener('click', function(e) {
            const rect = this.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;
            
            const ripple = document.createElement('span');
            ripple.classList.add('ripple-effect');
            ripple.style.left = `${x}px`;
            ripple.style.top = `${y}px`;
            
            this.appendChild(ripple);
            
            setTimeout(() => {
                ripple.remove();
            }, 600);
        });
    });
    
    // 添加页面元素进入动画
    addEntranceAnimations();
}

/**
 * 为页面元素添加进入动画
 */
function addEntranceAnimations() {
    // 使用IntersectionObserver实现元素进入视口时的动画
    const animateOnScroll = (entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('animate__animated');
                
                if (entry.target.classList.contains('fade-in-element')) {
                    entry.target.classList.add('animate__fadeIn');
                } else if (entry.target.classList.contains('slide-up-element')) {
                    entry.target.classList.add('animate__fadeInUp');
                } else if (entry.target.classList.contains('zoom-in-element')) {
                    entry.target.classList.add('animate__zoomIn');
                } else if (entry.target.classList.contains('flip-element')) {
                    entry.target.classList.add('animate__flipInX');
                }
                
                // 避免重复动画
                observer.unobserve(entry.target);
            }
        });
    };
    
    // 创建观察器实例
    const observer = new IntersectionObserver(animateOnScroll, {
        threshold: 0.1, // 当元素有10%进入视口时触发
        rootMargin: '0px 0px -50px 0px' // 提前50px触发动画
    });
    
    // 添加动画类并观察元素
    document.querySelectorAll('.card, .jumbotron, .table').forEach(element => {
        // 根据元素类型添加不同的动画类
        if (element.classList.contains('jumbotron')) {
            element.classList.add('fade-in-element');
        } else if (element.classList.contains('card')) {
            element.classList.add('slide-up-element');
        } else if (element.classList.contains('table')) {
            element.classList.add('zoom-in-element');
        }
        
        // 观察元素
        observer.observe(element);
    });
}

/**
 * 初始化表单验证
 */
function initFormValidation() {
    const searchForm = document.querySelector('form[action*="/flights/search"]');
    if (searchForm) {
        searchForm.addEventListener('submit', function(e) {
            const departureCity = document.getElementById('departureCity');
            const arrivalCity = document.getElementById('arrivalCity');
            let isValid = true;
            
            // 重置之前的验证状态
            resetValidationState(this);
            
            // 验证出发城市
            if (departureCity && departureCity.value.trim() === '') {
                isValid = false;
                showValidationError(departureCity, '请输入出发城市');
            }
            
            // 验证到达城市
            if (arrivalCity && arrivalCity.value.trim() === '') {
                isValid = false;
                showValidationError(arrivalCity, '请输入到达城市');
            }
            
            // 验证出发城市和到达城市不能相同
            if (departureCity && arrivalCity && 
                departureCity.value.trim() !== '' && 
                arrivalCity.value.trim() !== '' && 
                departureCity.value.trim() === arrivalCity.value.trim()) {
                isValid = false;
                showValidationError(arrivalCity, '出发城市和到达城市不能相同');
            }
            
            if (!isValid) {
                e.preventDefault();
                return false;
            }
            
            // 如果验证通过，添加加载效果
            if (isValid) {
                addLoadingEffect(this.querySelector('button[type="submit"]'));
            }
            
            return isValid;
        });
    }
    
    // 预订表单验证
    const bookingForm = document.querySelector('form[action*="/tickets/book"]');
    if (bookingForm) {
        bookingForm.addEventListener('submit', function(e) {
            let isValid = true;
            
            // 重置之前的验证状态
            resetValidationState(this);
            
            // 根据选择的旅客选项进行验证
            const passengerOption = document.querySelector('input[name="passengerOption"]:checked');
            if (passengerOption) {
                if (passengerOption.value === 'existing') {
                    const passengerId = document.getElementById('passengerId');
                    if (passengerId && passengerId.value === '') {
                        isValid = false;
                        showValidationError(passengerId, '请选择旅客');
                    }
                } else if (passengerOption.value === 'new') {
                    // 验证新旅客的必填信息
                    const name = document.getElementById('name');
                    const idCard = document.getElementById('idCard');
                    const phone = document.getElementById('phone');
                    
                    if (name && name.value.trim() === '') {
                        isValid = false;
                        showValidationError(name, '请输入旅客姓名');
                    }
                    
                    if (idCard) {
                        if (idCard.value.trim() === '') {
                            isValid = false;
                            showValidationError(idCard, '请输入身份证号');
                        } else if (!/^[0-9Xx]{18}$/.test(idCard.value.trim())) {
                            isValid = false;
                            showValidationError(idCard, '请输入有效的18位身份证号');
                        }
                    }
                    
                    if (phone) {
                        if (phone.value.trim() === '') {
                            isValid = false;
                            showValidationError(phone, '请输入联系电话');
                        } else if (!/^[0-9]{11}$/.test(phone.value.trim())) {
                            isValid = false;
                            showValidationError(phone, '请输入有效的11位手机号码');
                        }
                    }
                }
            }
            
            // 验证座位号
            const seatNumber = document.getElementById('seatNumber');
            if (seatNumber && seatNumber.value.trim() === '') {
                isValid = false;
                showValidationError(seatNumber, '请输入座位号');
            }
            
            if (!isValid) {
                e.preventDefault();
                return false;
            }
            
            // 如果验证通过，添加加载效果
            if (isValid) {
                addLoadingEffect(this.querySelector('button[type="submit"]'));
            }
            
            return isValid;
        });
    }
}

/**
 * 重置表单的验证状态
 */
function resetValidationState(form) {
    const invalidInputs = form.querySelectorAll('.is-invalid');
    const feedbacks = form.querySelectorAll('.invalid-feedback');
    
    invalidInputs.forEach(input => {
        input.classList.remove('is-invalid');
    });
    
    feedbacks.forEach(feedback => {
        feedback.remove();
    });
}

/**
 * 显示表单验证错误
 */
function showValidationError(inputElement, message) {
    // 添加错误样式
    inputElement.classList.add('is-invalid');
    
    // 创建错误提示
    const feedback = document.createElement('div');
    feedback.classList.add('invalid-feedback');
    feedback.textContent = message;
    
    // 如果是在input-group中
    if (inputElement.parentNode.classList.contains('input-group')) {
        inputElement.parentNode.after(feedback);
    } else {
        inputElement.after(feedback);
    }
    
    // 添加输入事件监听器，在用户开始输入时移除错误
    inputElement.addEventListener('input', function() {
        this.classList.remove('is-invalid');
        const feedback = this.nextElementSibling;
        if (feedback && feedback.classList.contains('invalid-feedback')) {
            feedback.remove();
        }
    }, { once: true });
    
    // 聚焦到错误输入框
    inputElement.focus();
}

/**
 * 添加按钮加载效果
 */
function addLoadingEffect(button) {
    if (!button) return;
    
    // 保存按钮原始内容
    const originalContent = button.innerHTML;
    
    // 设置加载状态
    button.disabled = true;
    button.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 处理中...';
    
    // 在页面离开前恢复按钮状态
    window.addEventListener('beforeunload', function() {
        button.disabled = false;
        button.innerHTML = originalContent;
    }, { once: true });
}

/**
 * 初始化响应式调整
 */
function initResponsiveAdjustments() {
    // 在小屏幕上调整表格显示
    function adjustTableForSmallScreens() {
        const tables = document.querySelectorAll('.table-responsive table');
        const isMobile = window.innerWidth < 768;
        
        tables.forEach(table => {
            const headers = Array.from(table.querySelectorAll('thead th')).map(th => th.textContent.trim());
            const rows = table.querySelectorAll('tbody tr');
            
            rows.forEach(row => {
                // 如果是移动设备并且还没有添加数据标签
                if (isMobile && !row.classList.contains('mobile-ready')) {
                    const cells = row.querySelectorAll('td');
                    cells.forEach((cell, index) => {
                        if (headers[index]) {
                            cell.setAttribute('data-label', headers[index]);
                        }
                    });
                    row.classList.add('mobile-ready');
                }
            });
        });
    }
    
    // 初始调用
    adjustTableForSmallScreens();
    
    // 窗口大小改变时调用
    window.addEventListener('resize', adjustTableForSmallScreens);
}

/**
 * 初始化平滑滚动
 */
function initSmoothScrolling() {
    // 平滑滚动到锚点
    document.querySelectorAll('a[href^="#"]:not([href="#"])').forEach(anchor => {
        anchor.addEventListener('click', function(e) {
            e.preventDefault();
            
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                window.scrollTo({
                    top: target.offsetTop - 70, // 考虑导航栏高度
                    behavior: 'smooth'
                });
            }
        });
    });
    
    // 平滑滚动回顶部按钮
    const scrollTopBtn = document.getElementById('scrollTopBtn');
    if (scrollTopBtn) {
        window.addEventListener('scroll', function() {
            if (window.pageYOffset > 300) {
                scrollTopBtn.classList.add('show');
            } else {
                scrollTopBtn.classList.remove('show');
            }
        });
        
        scrollTopBtn.addEventListener('click', function() {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });
    } else {
        // 如果没有回到顶部按钮，则创建一个
        createScrollTopButton();
    }
}

/**
 * 创建回到顶部按钮
 */
function createScrollTopButton() {
    const button = document.createElement('button');
    button.id = 'scrollTopBtn';
    button.className = 'btn btn-primary scroll-top-btn';
    button.innerHTML = '<i class="fas fa-arrow-up"></i>';
    button.title = '回到顶部';
    
    // 应用CSS样式
    button.style.position = 'fixed';
    button.style.bottom = '20px';
    button.style.right = '20px';
    button.style.zIndex = '99';
    button.style.display = 'none';
    button.style.borderRadius = '50%';
    button.style.width = '50px';
    button.style.height = '50px';
    button.style.padding = '0';
    button.style.boxShadow = '0 3px 10px rgba(0,0,0,0.2)';
    button.style.transition = 'all 0.3s ease';
    
    document.body.appendChild(button);
    
    // 添加点击和滚动事件
    button.addEventListener('click', function() {
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
    });
    
    window.addEventListener('scroll', function() {
        if (window.pageYOffset > 300) {
            button.style.display = 'block';
            // 使用延迟来添加淡入效果
            setTimeout(() => {
                button.style.opacity = '1';
            }, 10);
        } else {
            button.style.opacity = '0';
            // 淡出后隐藏
            setTimeout(() => {
                if (window.pageYOffset <= 300) {
                    button.style.display = 'none';
                }
            }, 300);
        }
    });
}

/**
 * 初始化延迟加载元素
 */
function initLazyLoad() {
    // 检查IntersectionObserver是否可用
    if ('IntersectionObserver' in window) {
        const lazyLoadObserver = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const element = entry.target;
                    
                    // 处理懒加载图片
                    if (element.tagName === 'IMG' && element.dataset.src) {
                        element.src = element.dataset.src;
                        element.removeAttribute('data-src');
                    }
                    
                    // 处理背景图片
                    if (element.dataset.background) {
                        element.style.backgroundImage = `url(${element.dataset.background})`;
                        element.removeAttribute('data-background');
                    }
                    
                    observer.unobserve(element);
                }
            });
        });
        
        // 观察所有需要懒加载的元素
        document.querySelectorAll('[data-src], [data-background]').forEach(element => {
            lazyLoadObserver.observe(element);
        });
    } else {
        // 如果不支持 IntersectionObserver，立即加载所有元素
        document.querySelectorAll('[data-src]').forEach(img => {
            img.src = img.dataset.src;
        });
        
        document.querySelectorAll('[data-background]').forEach(element => {
            element.style.backgroundImage = `url(${element.dataset.background})`;
        });
    }
}

/**
 * 初始化数字动画
 */
function initCounterAnimation() {
    // 检测具有counter类的元素并实现数字动画效果
    if ('IntersectionObserver' in window) {
        const counterObserver = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const counterElement = entry.target;
                    const target = parseInt(counterElement.getAttribute('data-count'));
                    const duration = parseInt(counterElement.getAttribute('data-duration') || 2000);
                    animateCounter(counterElement, 0, target, duration);
                    observer.unobserve(counterElement);
                }
            });
        });
        
        document.querySelectorAll('.counter[data-count]').forEach(element => {
            counterObserver.observe(element);
        });
    }
}

/**
 * 数字计数动画
 */
function animateCounter(element, start, end, duration) {
    let startTime = null;
    
    // 定义动画函数
    function animate(currentTime) {
        if (!startTime) startTime = currentTime;
        const timeElapsed = currentTime - startTime;
        const progress = Math.min(timeElapsed / duration, 1);
        const value = Math.floor(progress * (end - start) + start);
        
        element.textContent = value;
        
        if (progress < 1) {
            requestAnimationFrame(animate);
        } else {
            element.textContent = end;
        }
    }
    
    requestAnimationFrame(animate);
}

/**
 * 初始化卡片悬停效果
 */
function initCardHoverEffects() {
    const cards = document.querySelectorAll('.card');
    
    cards.forEach(card => {
        // 使用CSS变量存储卡片的transform-origin
        card.style.setProperty('--x', '50%');
        card.style.setProperty('--y', '50%');
        
        card.addEventListener('mousemove', function(e) {
            // 计算鼠标在卡片上的相对位置（百分比）
            const rect = this.getBoundingClientRect();
            const x = ((e.clientX - rect.left) / rect.width) * 100;
            const y = ((e.clientY - rect.top) / rect.height) * 100;
            
            // 设置CSS变量
            this.style.setProperty('--x', `${x}%`);
            this.style.setProperty('--y', `${y}%`);
            
            // 计算倾斜角度（最大为2度）
            const tiltX = ((y / 100) - 0.5) * 2; // 垂直移动导致水平倾斜
            const tiltY = -((x / 100) - 0.5) * 2; // 水平移动导致垂直倾斜
            
            // 应用3D变换效果
            this.style.transform = `perspective(1000px) rotateX(${tiltX}deg) rotateY(${tiltY}deg) scale(1.02)`;
            this.style.zIndex = 1;
        });
        
        card.addEventListener('mouseleave', function() {
            // 重置变换效果
            this.style.transform = '';
            this.style.zIndex = '';
        });
    });
}

/**
 * 初始化航班路线动画
 */
function initFlightRouteAnimations() {
    // 寻找所有显示航班路线的元素
    const flightRoutes = document.querySelectorAll('.flight-route');
    
    flightRoutes.forEach(route => {
        // 创建SVG路径动画
        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        svg.setAttribute('class', 'flight-path-svg');
        svg.style.position = 'absolute';
        svg.style.top = '0';
        svg.style.left = '0';
        svg.style.width = '100%';
        svg.style.height = '100%';
        svg.style.pointerEvents = 'none';
        
        // 创建路径
        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        path.setAttribute('d', 'M10,50 Q50,20 90,50');
        path.setAttribute('stroke', '#3949ab');
        path.setAttribute('stroke-width', '2');
        path.setAttribute('fill', 'none');
        path.setAttribute('stroke-dasharray', '5, 5');
        
        // 创建飞机图标
        const plane = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        plane.setAttribute('x', '0');
        plane.setAttribute('y', '0');
        plane.setAttribute('font-family', 'FontAwesome');
        plane.setAttribute('font-size', '14');
        plane.setAttribute('fill', '#3949ab');
        plane.textContent = '\uf072'; // 飞机图标unicode
        
        // 创建动画路径
        const animateMotion = document.createElementNS('http://www.w3.org/2000/svg', 'animateMotion');
        animateMotion.setAttribute('dur', '3s');
        animateMotion.setAttribute('repeatCount', 'indefinite');
        animateMotion.setAttribute('path', 'M10,50 Q50,20 90,50');
        
        // 添加到DOM
        plane.appendChild(animateMotion);
        svg.appendChild(path);
        svg.appendChild(plane);
        route.appendChild(svg);
    });
}